<template>
	<view class="my">
		<view style="width: 100%;height: 150rpx;"></view>
		<view class="top_tlt_box my-pdlr-15">
			<view class="img_box" @click="goPersonal">
				<image :src="imgUrl" mode=""></image>
			</view>
			<view class="tlt">
				<view class="tlt_name">{{nickname}}</view>
				<view class="Invite_box">
					<view class="Invite_box_txt my-mgr-15">邀请码：{{inviteCode===null?'暂无':inviteCode}}</view>
					<view class="Invite_box_copy" @click="copy(inviteCode)">复制</view>
				</view>
			</view>
		</view>
		<!-- <view class="detalis_box">
			<view class="detalis_box_txt" @click="goupgrad">
				<view class="num">{{couponsCount||0}}</view>
				<view class="txt my-mgt-4">购机券</view>
			</view>
			<view class="detalis_box_txt" @click="gomoney">
				<view class="num">{{balance||0}}</view>
				<view class="txt my-mgt-4">余额</view>
			</view>
			<view class="detalis_box_txt" @click="goIntegra">
				<view class="num">{{totalPoints||0}}</view>
				<view class="txt my-mgt-4">积分</view>
			</view>
		</view> -->
		<view class="v_bg my-mgt-15">
			<view class="v-bg_box">
				<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/yQzInbiFyU_card_icon.png" class="v-img" mode=""></image>
				<view class="ad_bpx my-pdlr-20">
					<view class="v-bg_box_txt">
						<view class="txt">{{vipLevel||'V1'}}</view>
						<view class="name my-mgt-4">积分政策：万{{vipDescription||0}}</view>
					</view>
					<view class="btn_bg" @click="goLevel">查看更多</view>
				</view>
			</view>
		</view>
		<view class="order_box">
			<view class="order_box_tlt my-pdlr-15">
				<view class="txt">我的订单</view>
				<view class="all_tlt" @click="goOrders">
					<text class="my-mgr-8">全部订单</text>
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" mode="" style="width: 17rpx;height: 18rpx;"></image>
				</view>
			</view>
			<view class="operation_box">
				<view class="once_icon" @click="goOrdersType(item)" v-for="(item,index) in orderDev" :key="item.id">
					<image :src="item.icon" mode="" style="width: 48rpx;height: 48rpx;"></image>
					<view class="my-mgt-5">{{item.txt}}</view>
				</view>
			</view>
		</view>
		<view class="my-mgt-15">
			<operatingArea></operatingArea>
		</view>
		<view class="btn_box my-mgt-20">
			<view class="out_btn" @click="onExit">退出登录</view>
		</view>
		<tabbar></tabbar>
		<!-- <view style="width: 100%;height: 140rpx;background: #FAFAFA;"></view> -->
	</view>
</template>

<script>
	import operatingArea from "@/components/operatingArea/operatingArea.vue"
	import {loginoutApi} from "@/api/myinter.js"
	import { createNamespacedHelpers } from "vuex";
	import tabbar from "@/components/tabbar/tabbar.vue";
	const { mapState,mapActions } = createNamespacedHelpers( "my");
	export default {
		components:{
			operatingArea,
			tabbar
		},
		data() {
			return {
				orderDev:[
					{id:1,url:'/pages/my/orders?type=PAYING',icon:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/EgmaJXZygk_order_icon_2.png',txt:"待付款"},
					{id:2,url:'/pages/my/orders?type=WAITING,CONFIRM,WAITING_SEND',icon:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/NErkOFlRPl_order_icon_1 .png',txt:"待发货"},
					{id:3,url:'/pages/my/orders?type=SEND_OUT',icon:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/KCwHqtrkdC_order_icon_3.png',txt:"待收货"},
					{id:4,url:'/pages/my/orders?type=SIGNED_IN,OFFLINE_DEAL',icon:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/PcfuaGkZVX_order_icon_4.png',txt:"评价"},
					{id:5,url:'',icon:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/WpSVjYftmO_order_icon_5.png',txt:"退款/售后"},
				],
			};
		},
		created() {
			this.getUserData()
		},
		computed:{
			...mapState(["balance","totalPoints","inviteCode","userLevel","imgUrl","nickname","couponsCount","vipLevel","vipDescription","openBank"])
		},
		methods:{
			...mapActions(["getUserData"]),
			copy(str){
				uni.setClipboardData({
					data:str
				})
			},
			gomoney(){
				uni.navigateTo({
					url:"/pages/main/myWallet"
				})
			},
			goLevel(){
				uni.navigateTo({
					url:"/pages/my/level"
				})
			},
			goPersonal(){
				uni.navigateTo({
					url:"/pages/my/personalData"
				})
			},
			goIntegra(){
					uni.navigateTo({
						url:"/pages/my/integral"
					})
				
				
			},
			goupgrad(){
				uni.navigateTo({
					url:"/pages/my/upgradeCoupon"
				})
			},
			goOrders() {
				uni.navigateTo({
					url:"/pages/my/orders"
				})
			},
			goOrdersType(item) {
				if(item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			//退出登陆
			async onExit() {
				let _that = this
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await loginoutApi({})
				if(res.statusCode ===200){
					uni.hideLoading()
					uni.setStorageSync('isLogin', false)
					uni.clearStorageSync();
					uni.reLaunch({
						url: "/pages/login/login"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my{
		width: 100%;
		height: 100vh;
		background: #FAFAFA;
		.top_tlt_box{
			width: 100%;
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			.tlt{
				width: 70%;
				height: 170rpx;
				padding-top: 10rpx;
				.tlt_name{
					width: 100%;
					line-height: 85rpx;
					font-size: 48rpx;
					font-weight: bold;
					color: #010101;
				}
				.Invite_box{
					width: 100%;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					.Invite_box_txt{
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
					.Invite_box_copy{
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
					}
				}
			}
			.img_box{
				width: 30%;
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				align-items: center;
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
			}
		}
		.detalis_box{
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			.detalis_box_txt{
				width: 33.3%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.txt{
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
				.num{
					font-size: 36rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}
		.v_bg{
			width: 100%;
			height: 130rpx;
			.v-bg_box{
				width: 690rpx;
				height: 100%;
				margin: auto;
				display: flex;
				align-items: center;
				position: relative;
				.v-img{
					width: 100%;
					height: 100%;
				}
				.ad_bpx{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					left: 0rpx;
					top: 0rpx;
				}
				.v-bg_box_txt{
					width: 100%;
					height: 100%;
					
					.txt{
						font-size: 40rpx;
						font-weight: bold;
						color: #7F521A;
					}
					.name{
						font-size: 26rpx;
						font-weight: 500;
						color: #CC944A;
					}
				}
			}
			.btn_bg{
				width: 158rpx;
				height: 58rpx;
				background: #7F521A;
				border-radius: 29rpx;
				text-align: center;
				line-height: 58rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.order_box{
			width: 100%;
			height: 261rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -12rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			.order_box_tlt{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.txt{
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
				}
				.all_tlt{
					font-size: 24rpx;
					font-weight: 500;
					color: #B3B3B3;
				}
			}
			.operation_box{
				width: 100%;
				height:160rpx;
				display: flex;
				align-items: center;
				.once_icon{
					width: 20%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #808080;
				}
			}
		}
		.btn_box{
			width: 100%;
			height: 90rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			.out_btn{
				font-size: 30rpx;
				font-weight: 500;
				color: #F05329;
			}
		}
	}
</style>
